/* eslint-disable react/destructuring-assignment */
/* eslint-disable no-restricted-syntax */
import React from 'react';
import { Card, Button, Table } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;

@connect(({ injuryware }) => ({
  injuryware,
}))
class ClientInfoDetails extends React.Component {
  state = {
    injSecAccoId: '',
  };

  componentDidMount() {
    const { location } = this.props;
    const injSecAccoId = queryString.parse(location.search).injSecAccoId
      ? queryString.parse(location.search).injSecAccoId
      : this.state.injSecAccoId;
    this.detail(injSecAccoId);
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'injuryware/updateModelData',
      payload: {
        insAccoName: '',
        custList: [],
        injSecAccoName: '',
        injSecAccoCode: '',
        feeRatio: '',
        remark: '',
        ratioListDetail: [],
      },
    });
  }

  closeDetail = () => {
    router.goBack();
  };

  detail = injSecAccoId => {
    const { dispatch } = this.props;
    const obj = {};
    obj.injSecAccoId = injSecAccoId;
    dispatch({
      type: 'injuryware/fetchInjuryDetails',
      payload: obj,
    });
  };

  render() {
    const {
      injuryware: {
        insAccoName,
        custList,
        injSecAccoName,
        injSecAccoCode,
        feeRatio,
        remark,
        ratioListDetail,
        useTaxFlag,
      },
    } = this.props;
    const columns = [
      {
        title: '浮动费率(%)', // defaultValue={index == (this.state.dataSource.length - 1) ? record.ratioVal : ''}
        dataIndex: 'floatFeeRatio',
        key: 'floatFeeRatio',
        width: '15%',
      },
      {
        title: '开始年月', // disabled={index == (this.state.dataSource.length - 1)}disabled={record.updateFlag== 2?true:false}
        dataIndex: 'beginYm',
        key: 'beginYm',
        width: '15%',
        render: text => <span>{text || '--'}</span>,
      },
      // {
      //   title: '结束年月', // defaultValue={index == (this.state.dataSource.length - 1) ? record.ratioVal : ''}
      //   dataIndex: 'endYm',
      //   key: 'endYm',
      //   width: '15%',
      // },
    ];
    return (
      <PageHeaderWrapper>
        <Card title="工伤二级户详情" bordered={false}>
          {/* <Row>
                        <Col span={8}><span>大库名称</span><span>{accoName}</span></Col>
                        <Col span={8}><span>公司名称</span><span>{unitName}</span></Col>
                        <Col span={8}><span>统一社会信用代码</span><span>{uniCreditCode}</span></Col>
                    </Row>
                    <Row>
                        <Col span={8}><span>开户地区</span><span>{areaId}</span></Col>
                        <Col span={8}><span>所属公积金机构</span><span>{blngAccoOrg}</span></Col>
                        <Col span={8}><span>是否突破上线</span><span>{isExceedCeiling}</span></Col>
                    </Row>
                    <Row>
                        <Col span={8}><span>开户行</span><span>{custBankName}</span></Col>
                        <Col span={8}><span>银行账号</span><span>{custBankId}</span></Col>
                        <Col span={8}><span>公积金组</span><span>{accuLsPkgIdsList}</span></Col>
                    </Row>
                    <Row>
                        <Col span={8}><span>备注</span><span>{remark}</span></Col>
                    </Row> */}
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="大库名称 ">{insAccoName}</Description>
            <Description term="关联客户名称">{custList}</Description>
            <Description term="二级户名称">{injSecAccoName}</Description>
            <Description term="二级户编码">{injSecAccoCode}</Description>
            {useTaxFlag === '1' && <Description term="基准费率(%)">{feeRatio}</Description>}
            {/* <Description term="工伤最低基数限制">{floorBaseRstr}</Description> */}
            <Description term="备注">{remark || '--'}</Description>
          </DescriptionList>
        </Card>
        <Card title="浮动费率" bordered={false}>
          <Table
            columns={columns}
            dataSource={ratioListDetail}
            pagination={false} // 分页
            rowKey={record => record.floatFeeRatioId}
          />
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button type="default" onClick={this.closeDetail}>
            {' '}
            {' 返回 '}
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default ClientInfoDetails;
